<template>
	<view class="content">
		<u-sticky bgColor="#fff">
			<view class="nav">
				<u-tabs :list="tablist" lineWidth="30" lineColor="#23BF61" @click="clicknav" :activeStyle="{
				color: '#303133',
				fontWeight: 'bold',
				transform: 'scale(1.05)'
			}" :inactiveStyle="{
				color: '#606266',
				transform: 'scale(1)'
			}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
				</u-tabs>
			</view>
		</u-sticky>
		<view class="pd3">
			<scroll-view scroll-y="true" @scrolltolower="lowerBottom" style="height:85vh;">
				<view class="item" v-for="(item,index) in list" @click="orderdetail(item.cd_status)">
					<view class="num">订单号：{{item.order_no}} <text>{{item.cd_status}}</text> </view>
					<view class="info">
						<view class="title">{{item.station_name}}</view>
						<text>充电桩码：{{item.port_id}}号插座</text>
						<text>充电时间：{{item.start_time}} - {{item.stop_time}}</text>
						<text>电桩地址：{{item.station_adds}}</text>
					</view>
					<view class="boot">
						<view class="time">时长：{{item.cd_times}}（小时）</view>
						<view class="price">订单金额：<text>￥{{item.cd_fei}}</text></view>
					</view>
				</view>
				<view class="medicine_title">
					{{isBottom?'没有更多数据了～':'下拉加载更多'}}
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	let that
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				tablist: [{
					name: '全部',
				}, {
					name: '充电中',
				}, {
					name: '已结束'
				}],
				type: 0,//1:充电中 2:充电结束
				list: [],
				currentpage: 1, //当前页码
				isBottom: false, //是否请求完毕数据
			}
		},
		onLoad() {
			this.listinit()
		},
		onShow() {

		},
		computed: {
			//引入store全局变量
			...mapState(['loginState', 'userInfo'])
		},
		mounted() {
			that = this
		},
		methods: {
			//数据初始化配置
			listinit() {
				this.isBottom = false
				this.getlist(this.type)
			},
			//订单列表
			getlist() {
				this.$http_api.user_order_list({
					uid: this.userInfo.id,
					type: this.type,
					page: this.currentpage
				}).then((res) => {
					that.list = that.list.concat(res)
					if (res.length == 0 || res.length < 10) {
						that.isBottom = true
					}
				})
			},
			// 滚到底部
			lowerBottom() {
				if (!this.isBottom) {
					this.currentpage += 1
					this.getlist(this.type)
				}
			},
			//订单详情
			orderdetail(status) {
				if (status == '充电中') {
					uni.navigateTo({
						url: '/pages/order/order-detail'
					})
				} else {
					this.$u.toast('该订单已结束')
				}

			},
			//切换导航
			clicknav(item) {
				this.currentpage = 1
				this.isBottom = false
				this.list = []
				this.type = item.index
				
				this.getlist(this.type)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #f5f5f5;
		padding-top: 0;

		.nav {
			margin-bottom: 30rpx;
			padding: 20rpx 0;
		}

		.pd3 {
			width: 100%;
			padding: 0 3%;
			box-sizing: border-box;
		}

		.item {
			background: #fff;
			padding: 35rpx;
			margin-bottom: 40rpx;
			border-radius: 10rpx;

			.num {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 30rpx;
				padding-bottom: 24rpx;
				border-bottom: 1px dashed #dfdfdf;

				text {
					float: right;
					padding: 6rpx 20rpx;
					background: #23BF61;
					color: #fff;
					font-size: 24rpx;
					border-radius: 40rpx;
				}
			}

			.info {
				background: url("../../static/cd.png") no-repeat right;
				background-size: 28px;
				background-position-y: 0;

				.title {
					font-size: 32rpx;
					font-weight: 600;
					margin-bottom: 20rpx;
				}

				text {
					font-size: 28rpx;
					display: block;
					color: #666;
					margin-top: 10rpx;
				}
			}

			.boot {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
				font-size: 28rpx;
				color: #666;

				.price {
					text {
						color: #23BF61;
					}
				}
			}
		}

		.medicine_title {
			font-size: 28rpx;
			color: #999;
			text-align: center;
			margin: 60rpx 0;
		}
	}
</style>